import React from "react";
import {
  BrowserRouter,
  Outlet,
  Route,
  Routes,
  Link,
  useRoutes,
} from "react-router-dom";

function Home() {
  return <div>this is home</div>;
}

function About() {
  return <div>this is about</div>;
}

function Layout() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Outlet />
    </div>
  );
}

const routes = [
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: "about", element: <About /> },
    ],
  },
];

function WrapperRouter() {
  const element = useRoutes(routes);
  return element;
}

/**
 * 集中式路由使用步奏：
 * 1. 定义一个路由嵌套结构的数组。
 * 2. 自定义一个路由组件，通过useRoutes(),加载我们定义好的路由。
 * 3. 将自定义的路由组件挂载到APP组件中
 * 4. 将<Link></Link> 放到我们需要的位置，实现路由跳转。
 */
function App() {
  return (
    <div>
      App
      <BrowserRouter>
        <WrapperRouter />
      </BrowserRouter>
    </div>
  );
}

export default App;
